<template>
  <div style="height: 100%">
    <el-container>
      <el-main>
        <el-tabs type="border-card">
          <el-tab-pane label="公告列表">
            <el-card>
              <el-form ref="formRef" :model="noticeForm" label-width="60px">
                <el-row :gutter="15">
                  <el-col :span="8">
                    <el-form-item label="标题" prop="title">
                      <el-input v-model="noticeForm.title" placeholder="请输入标题" clearable />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-button type="primary" icon="search" @click="getnotice">搜索</el-button>
                    <el-button icon="refresh" @click="resetForm">重置</el-button>
                  </el-col>
                </el-row>
              </el-form>
            </el-card>
            <el-card style="margin-top: 15px">
              <div class="toolbar" style="margin-bottom: 15px">
                <el-button type="primary" icon="plus" @click="btnUserDialog">新增</el-button>
              </div>
              <el-table :data="noticeList" border>
                <el-table-column align="center" type="selection" />
                <el-table-column label="公告标题" prop="title" align="center" />
                <el-table-column label="公告类型" prop="type" align="center">
                  <template #default="{ row }">
                    <template v-for="item in dicts.system_notice_type">
                      <el-tag v-if="Number(row.type) == item.v" :key="item.v">{{ item.k }}</el-tag>
                    </template>
                  </template>
                </el-table-column>
                <el-table-column label="状态" prop="enabled" align="center">
                  <template #default="{ row }">
                    <template v-for="item in dicts.system_global_status">
                      <el-tag
                        :type="row.enabled == 1 ? '' : 'danger'"
                        v-if="Number(row.enabled) == item.v"
                        :key="item.v"
                        >{{ item.k }}</el-tag
                      >
                    </template>
                  </template>
                </el-table-column>
                <el-table-column
                  label="创建时间"
                  :formatter="rendererDateTime"
                  prop="createTime"
                  align="center"
                />
                <el-table-column label="操作" width="200" fixed="right">
                  <template #default="{ row }">
                    <div class="sys-table-main-actions">
                      <el-link
                        icon="edit"
                        :underline="false"
                        type="primary"
                        @click="btnUserDialog(row.id)"
                        >编辑</el-link
                      >
                      <el-link
                        icon="delete"
                        :underline="false"
                        type="danger"
                        style="margin: 0 15px"
                        @click="del(row.id)"
                        >删除</el-link
                      >
                    </div>
                  </template>
                </el-table-column>
              </el-table>
              <pagination
                :total="totals"
                @update:current-page="handleCurrentPageUpdate"
                @update:page-size="handlePageSizeUpdate"
              ></pagination>
            </el-card>
          </el-tab-pane>
        </el-tabs>
      </el-main>
    </el-container>
    <noticeDialog
      v-if="dialogVisible"
      v-model:dialogVisible="dialogVisible"
      :notice-update-id="noticeUpdateId"
      @notice-change="getnotice"
    ></noticeDialog>
  </div>
</template>
<script setup lang="ts">
import {
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  ref,
  reactive,
  onBeforeMount,
  getCurrentInstance,
  ComponentInternalInstance,
  toRefs
} from 'vue'
import tool from '@utils/tool'

import type { FormInstance } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'

import { noticePage, noticeDel } from '@api/notice'
import { IDictForm, IListInfo } from '@interface/notice'
import noticeDialog from './noticeDialog.vue'
//控制dialog显示
const dialogVisible = ref<boolean>(false)
const noticeUpdateId = ref('')

const state = reactive({
  noticeForm: <IDictForm>{
    current: 1,
    size: 10,
    title: ''
  },
  noticeList: [] as IListInfo[],
  totals: 0
})

const { noticeForm, noticeList, totals } = toRefs(state)

onBeforeMount(() => {
  const { proxy } = getCurrentInstance() as ComponentInternalInstance
  if (proxy) {
    ;(proxy as any).getDicts(['system_notice_type', 'system_global_status'])
  }
  getnotice()
})

const getnotice = async () => {
  const res = await noticePage(noticeForm.value)
  const { records } = res.data
  totals.value = res.total
  noticeList.value = records
}

//分页-页码
const handleCurrentPageUpdate = (page: number) => {
  noticeForm.value.current = page
  getnotice()
}
//分页-一页显示多少条
const handlePageSizeUpdate = (page: number) => {
  noticeForm.value.size = page
  getnotice()
}

//新增|编辑
const btnUserDialog = (id: string) => {
  if (typeof id == 'string') {
    noticeUpdateId.value = id
  } else {
    noticeUpdateId.value = ''
  }
  dialogVisible.value = true
}

const del = (id: string) => {
  ElMessageBox.confirm('是否删除公告', {
    type: 'error',
    confirmButtonText: '删除',
    cancelButtonText: '取消'
  })
    .then(async () => {
      const res = await noticeDel(id)
      if (res.code != '200') {
        ElMessage({
          type: 'error',
          message: res.message
        })
      } else {
        ElMessage({
          type: 'success',
          message: '删除成功'
        })
      }
      getnotice()
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除'
      })
    })
}
//重置
const resetForm = () => {
  noticeForm.value = {
    current: 1,
    size: 10,
    title: ''
  }
  getnotice()
}

//时间戳转换为标准时间
const rendererDateTime = (row, column, timeValue: number) => {
  return tool.dateFormat(timeValue)
}
</script>
<style lang="scss" scoped></style>
